<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ include file="/WEB-INF/jsp/common/taglibs.jsp"%>
<bsl:layout-render name="/WEB-INF/jsp/common/layout.jsp">
<bsl:layout-component name="html-head">
	<link rel="stylesheet" type="text/css" href="<%=request.getContextPath()%>/css/jquery.fileupload-ui.css" />
	<link rel="stylesheet" href="<%=request.getContextPath()%>/css/jqtransform.css" type="text/css" media="all" />
	<link rel="stylesheet" href="<%=request.getContextPath()%>/css/viewDiscussDetails.css" />
	
	
	<script charset="utf-8" src="<%=request.getContextPath()%>/editor/kindeditor-min.js"></script>
	<script charset="utf-8" src="<%=request.getContextPath()%>/editor/lang/zh_CN.js"></script>
	
	<script src="<%=request.getContextPath()%>/js/jquery.ui.widget.js"></script>
	<script src="<%=request.getContextPath()%>/js/tmpl.js"></script>
	<script src="<%=request.getContextPath()%>/js/load-image.js"></script>
	<script src="<%=request.getContextPath()%>/js/canvas-to-blob.min.js"></script>
	<script src="<%=request.getContextPath()%>/js/bootstrap.min.js"></script>
	<script src="<%=request.getContextPath()%>/js/bootstrap-image-gallery.js"></script>
	<script src="<%=request.getContextPath()%>/js/jquery.iframe-transport.js"></script>
	<!-- The basic File Upload plugin -->
	<script src="<%=request.getContextPath()%>/js/jquery.fileupload.js"></script>
	<!-- The File Upload file processing plugin -->
	<script src="<%=request.getContextPath()%>/js/jquery.fileupload-fp.js"></script>
	<!-- The File Upload user interface plugin -->
	<script src="<%=request.getContextPath()%>/js/jquery.fileupload-ui.js"></script>
	<script src="<%=request.getContextPath()%>/js/locale.js"></script>
	<script src="<%=request.getContextPath()%>/js/upload.main.js"></script>
	<script src="<%=request.getContextPath()%>/js/jquery.jqtransform.js"></script>
	<script>
	var editors = [];
	
	$(function(){
		var options1 = {navigation: 'hover',direction:  'left'};
	     $('.ppy3').popeye(options1);
		$("#offerRate").val('${subComment.offerRateObject.integerPart}');
		var editorList = $("textarea[name='comment.content']");
		$.each(editorList, function(i, val) {
			KindEditor.ready(function(K) {
			editors[i] =	K.create(val, {
					resizeType : 1,
					allowPreviewEmoticons : false,
					allowImageUpload : true,
					filePostName:'kindImgFile',
					uploadJson:'harry/fileUpload',
					afterUpload : function(self, data) {
		                  addCommentPhotos(data.id, val.parentNode.id);
		               },
		               afterChange : function() {
						      //限制字数
						      var limitNum = 500;  //设定限制字数
						      var pattern = '还可以输入' + limitNum + '字';
						      $('#' + val.parentNode.id +'1').html(pattern); //输入显示
						      if(this.count('text') > limitNum) {
						       pattern = ('字数超过限制，请适当删除部分内容');
						       //超过字数限制自动截取
						       var strValue = editor.text();
						       strValue = strValue.substring(0,limitNum);
						       editor.text(strValue);      
						       } else {
						       //计算剩余字数
						       var result = limitNum - this.count('text');
						       pattern = '还可以输入' +  result + '字';
						       }
						       $('#' + val.parentNode.id +'1').html(pattern); //输入显示
						      ////////
						     } ,
					items : [
						 'emoticons', '|', 'image']
				});
			});
		});
	});
	

	function sync() {
		$.each(editors, function(i, editor) {
			editor.sync("comment.content");
		});
	}

	function articleComment(form)
	{
		sync();
		form.submit();
	}

	function replyComment(form) {
		sync();
		form.submit();
		
	}
	</script>
	
</bsl:layout-component>
<bsl:layout-component name="title">
贴吧-${comment.title }
</bsl:layout-component>
<bsl:layout-component name="content" >
<c:set value="<%=request.getContextPath()%>" var="contextPath"></c:set>

<div class="head_nav" >
	<a href="${contextPath}/viewArticleDetails?article.id=${comment.article.id}" rel="external" title="${comment.article.title}">${comment.article.title}</a>
	&nbsp;&gt;&gt;&nbsp; <a href="${contextPath}/viewDiscussList?article.id=${comment.article.id}">贴吧</a>
	<c:if test="${not empty topComment}">
		&nbsp;&gt;&gt;&nbsp;<a href="${contextPath}/viewDiscussDetails?comment.id=${topComment.id}">${topComment.title}</a>
	</c:if>
</div>

<div style="clear: both;"></div>

   <div class="comment_core">
   
   		<div class="comment_core_title">
   			<div class="title_left"><h3>${comment.title}</h3></div>
   			<div class="title_right">
   				<jsp:include page="../common/pageNum.jsp">
   					<jsp:param value="viewDiscussDetails?comment.id=${comment.id}&" name="actionName"/>
   					<jsp:param value="${page}" name="page"/>
   		        </jsp:include>
   			
   			</div>

   		</div>
 <c:if test="${page.currentPage == 1}">
   	<div class="comment_entry">
   		
   		<div class="entry_left">
   		<div style="clear: both;"></div>
   			<div class="user_icon">
          		 <a href="#" onclick="return false;" target="_blank"><img src="${contextPath}${comment.createByUser.headPhoto.thumbnailMini}" alt="" title=""></a>
          		
      		</div>
      		 <a href="${contextPath }/viewCustomerInfo?customer.id=${comment.createByUser.id}" title="${comment.createByUser.userName}" target="_blank">${comment.createByUser.userName}</a>
   		</div>
   		<div class="entry_right">
   		  		 <c:if test="${not empty comment.album.photos}">
            	 	<div class="ppy3" style="margin-left:10px">
								<ul class="ppy-imglist">
									<c:forEach items="${comment.album.photos}" var="photo">
										<li>
							                  <a href="${contextPath}${photo.thumbnailLarge}">
							                      <img src="${contextPath}${photo.thumbnailSmall}" alt="">
							                  </a>
							                  <c:if test="${not empty photo.description}">
							                  	<span class="ppy-extcaption">
							                      <strong>${photo.description}</strong>
							                  	</span>
							                  </c:if>
							                  
							              </li>
									</c:forEach>
							              
							      </ul>
							        <div class="ppy-outer">
							                <div style="background-image: url(&quot;${contextPath}${comment.album.coverPhoto.thumbnailSmall}&quot;);" class="ppy-stage">
							                    <div class="ppy-counter">
							                        <strong class="ppy-current">1</strong> / <strong class="ppy-total">9</strong> 
							                    </div>
							               	</div>
							                <div class="ppy-nav">
							                        <a class="ppy-next" title="下一张">下一张</a>
							                        <a class="ppy-prev" title="上一张">上一张</a>
							                </div>
							       </div>
							       <div style="visibility: hidden; height: 0px; overflow: hidden;" class="ppy-caption">
							                <span class="ppy-text">
							                       
							                </span>
							       </div>
						</div>
            	 </c:if>	
            	 
	             <div class="comment_details">
	             	${comment.content}
	             </div>
	             
            	 <div style="clear: both;"></div>
	             <div class="vote_btns">
		      		<button onclick="scoreComment('${comment.id}', 1)" type="button" class="btn btn-info">支持</button><span style="color: #aaa" id="goodComm${comment.id}">(${comment.goodNum})</span>&nbsp;&nbsp;
		      		<button onclick="scoreComment('${comment.id}', 2)" type="button" class="btn">反对</button><span style="color: #aaa" id="badComm${comment.id}">(${comment.badNum})</span>
		         </div>
			          <div class="tails_info" >
		             	<div class="info_left entry-meta" >
		                    <span>
		                    		<jsp:include page="../common/timeFormat.jsp">
										<jsp:param value="${comment.createTime.time}" name="time"/>
										<jsp:param value="${comment.createTime.year }" name="year"/>
										<jsp:param value="${comment.createTime.month }" name="month"/>
										<jsp:param value="${comment.createTime.day}" name="day"/>
										<jsp:param value="${comment.createTime.hours}" name="hours"/>
										<jsp:param value="${comment.createTime.minutes}" name="minutes"/>
										<jsp:param value="${comment.createTime.date}" name="date"/>
									</jsp:include>
		                    </span>
		                  	<c:set var="isAdmin" value="no"></c:set>
								<c:choose>
									<c:when test="${user.role.name eq 'admin'}">
										<c:set var="isAdmin" value="yes"></c:set>
									</c:when>
								</c:choose>
								<c:if test="${ isAdmin eq 'yes' || user.userName eq comment.createByUser.userName}">
									<a href="${contextPath}/deleteComment?comment.id=${comment.id}&article.id=${comment.article.id}" >删除</a>
								</c:if>
								
		             	</div>
		             	
		            </div>
	         </div>
	         
   		</div>
   	
		 
    </c:if>  
		<jsp:include page="viewDiscussBBS.jsp" >
			<jsp:param value="${subComments}" name="subComments"/>
			<jsp:param value="${comment}" name="comment"/>
		</jsp:include>
  


     
   <div style="clear: both;"></div>
  <div class="core_footer">
  <div class="footer_left">
		  <button type="button" class="btn btn-danger" onclick="switchReply('pub_area','${user.userName}', '${contextPath}/viewLogin')">
		  	发表评论
		  </button>
   </div>
   <div class="footer_right">
   		<jsp:include page="../common/pageNum.jsp">
   					<jsp:param value="viewDiscussDetails?comment.id=${comment.id}&" name="actionName"/>
   					<jsp:param value="${page}" name="page"/>
   		</jsp:include>
   </div>
	
 </div>	
</div>		
	
        <div id="pub_area" class="reply_area_bottom">
        	<div class="comment_entry" style="border-bottom: 1px solid #dedede;">
        	
              <div class="entry_left">
		   		<div style="clear: both;"></div>
		   			<div class="user_icon">
		          		 <a href="#" onclick="return false;" target="_blank"><img src="${contextPath}${user.headPhoto.thumbnailMini}" alt="" title=""></a>
		          		
		      		</div>
		      		<a href="${contextPath }/viewMyInfo" title="${user.userName}" target="_blank">${user.userName}</a>
		   		</div>
		   		<div class="entry_right">
		   			<div class="reply_bottom_input">
		   				<form action="${contextPath}/saveSubComment" method="post">	
		                    <div id="formContent${comment.id}">
		                    	<div id="formContent${comment.id}1" class="word_surplus sign-text"></div>
		                    	<textarea name="comment.content" style="height:200px;width:520px;"></textarea>
		                    	<input  type="hidden" name="article.id" value="${comment.article.id}">
		                    	<input type="hidden" name="superComment.id" value="${comment.id}"  />
		                    	<input type="hidden" name="parentComment.id" value="${comment.id}"  />
		                    	<input type="hidden" name="subProperty" value="30"  />
		                    </div>
		                    
		                    <div class="reply_bottom_btn">
		                           <button type="button" class="btn btn-info" onclick="articleComment(this.form)">回复</button>
		                     </div>
	                  </form>
		   			</div>
	             	
               </div>
           </div>
     </div>
</bsl:layout-component>
</bsl:layout-render>